<template>
  <div class="sign-input-wrapper">
    <h3 v-show="!inputing" @click.stop="toInput($event)"
    :class="signColorClass">{{sign || defaultSign}}</h3>
    <input @click.stop v-show="inputing" type="text" :value="sign"
    @change.stop="renewSign($event)" @keydown.enter="blurSign($event)">
  </div>
</template>

<script>
import { nextTick } from '@vue/runtime-core';
export default {
  props: {
    url: String,
    sign: String,
    defaultSign: String
  },
  data() {
    return {
      inputing: false
    }
  },
  computed: {
    initSign() {
      return this.sign ? this.sign : this.defaultSign;
    },
    signColorClass() {
      if(this.sign) {
        return ''
      } else {
        return 'colorUnmodified';
      }
    }
  },
  methods: {
    toInput(e) {
      this.inputing = true;
      nextTick(() => {
        let sib = e.target.nextSibling;
        sib.focus();
        if(typeof sib.focus === 'function') e.target.nextSibling.select();
      });
    },
    renewSign(e) {
      this.$emit('change', e.target.value);
    },
    blurSign(e) {
      e.target.blur();
      this.inputing = false;
    }
  },
  mounted() {
    document.body.addEventListener('click', () => {
      this.inputing = false;
    })
  }
}
</script>

<style scoped lang="less">
  .sign-input-wrapper {
    box-sizing: border-box;
    width: var(--w);
    height: var(--h);
    text-align: left;

    h3, input {
      box-sizing: border-box;

      position: absolute;
      top: 0;
      left: 0;
      // margin-left: calc(-1 * var(--fs));
      padding: 0 calc(var(--fs));
      display: block;
      width: var(--w);
      height: calc(var(--h) * 1.1);
      line-height: var(--h);
      font-size: var(--fs);
      color: var(--dark);

      &:hover {
        cursor: pointer;
      }
    }

    input {
      margin-top: calc(-1 * var(--h) * 0.05);
      border-radius: 3px;
      box-shadow: 0 0 3px var(--gray);
    }
  }
</style>